/*
 * Copyright (C) 2013 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';
@import 'pages/shared/feature_flags';

.profile_table {
  td {
    padding: 2px 5px;
    vertical-align: top;
  }

  .edit_data {
    display: none;
  }

  &.editing {
    .edit_data {
      display: inline;
    }

    .display_data {
      display: none
    }
  }
  .data_description {
    font-size: 0.8em;
    color: $ic-font-color-dark;
  }
}

#user_bio {
  height: 200px;
  width: 100%;
}

#registered_services {
  .service {
    font-size: 1.2em;
    padding: 2px;

    .delete_service_link {
      display: none;
    }

    &.service-hover {
      background-color: #eee;
      border-radius: 3px;
    }

    &.service-hover .delete_service_link {
      display: inline;

      img {
        width: auto;
        height: auto;
      }
    }

    img {
      width: 30px;
      height: 30px;
    }
  }
}

li[id$=service_google_docs] {
  display: none;
}

#unregistered_services {
  .btn {
    margin: 3px;
    width: 150px;

    img {
      vertical-align: middle;
      width: 30px;
      height: 30px;
    }
  }

  .service a {
    text-align: left;
  }
}

.profile_pic_link {
  position: relative;
  float: left;
  margin-right: 5px;

  .icon-edit {
    background: rgba(0, 0, 0, .75);
    bottom: 0;
    color: #fff;
    padding: 2px;
    position: absolute;
    right: 0;
    visibility: hidden;
  }

  &:hover .icon-edit {
    visibility: visible;
  }
}

.profile_pic_list {
  .img {
    cursor: pointer;
    display: inline-block;
    float: left;
    margin: 2px;
    overflow: hidden;
    padding: 4px;
    width: 50px;

    &.selected {
      border: 2px solid #444;
      padding: 2px;
    }

    &:hover {
      border: 2px solid #888;
      padding: 2px;
    }
  }

  img {
    max-height: 75px;
    max-width: 50px;
    min-height: 25px;
    vertical-align: middle;
  }
}

#token_details_dialog {
  table {
    border-collapse: collapse;
    width: 100%;

    th {
      font-weight: bold;
      vertical-align: top;
      white-space: nowrap;
      width: 5%;
    }

    td, th {
      border-top: 1px dotted #ccc;
      padding: 3px 8px;
    }

    .full_token_warning {
      font-size: 0.8em;
    }
  }
}

.avatar-nav {
  text-align: center;

  .nav-pills {
    display: inline-block;
  }

  .nav-pills a:focus {
    background: #eee;
    outline: none;
    text-decoration: none;
  }

  .nav-pills .active a:focus {
    background: #0088cc;
  }
}

.avatar-content > div {
  display: none;
}

.avatar-content .active {
  display: block;
}

.select-photo-link {
  display: block;
  @include fontSize(18px);
  font-weight: bold;
  padding: 0 0 16px 0;
  text-align: center;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &.over {
    outline: 5px dashed #eee;
  }
}

.icon-select-photo {
  display: block !important;
  height: 256px !important;
  margin: 0 auto 16px auto;
  width: 256px !important;

  &:before {
    color: #c5c5c5;
    display: block !important;
    font-size: 256px !important;
  }
}

.avatar-preview {
  max-height: 100%;
  max-width: 100%;
}

.fullsize {
  height: auto;
  max-height: none;
  max-width: none;
  width: auto;
}

.avatar-preview-wrapper {
  padding: 8px 0;
}

.webcam-live-preview {
  background: url(/images/webcam_preview.png) center center;
  display: block;
  margin: 0 auto;
  max-height: 350px;
  max-width: 350px;
  position: relative;

  &.pending {
    height: 250px;
    width: 250px;
  }
}

.webcam-clip {
  margin: 0 auto 16px auto;
  overflow: hidden;
}

.webcam-preview {
  display: block;
  margin: 0 auto 16px auto;
  max-height: 350px;
  max-width: 350px;
}

.webcam-preview-wrapper {
  display: none;
}

.gravatar-preview-image {
  height: 200px;
  width: 200px;

}

#disable_inbox {
  vertical-align: top;
}

a.delete_key_link {
  color: $ic-color-medium-darker;
}
.avatar-preview .CanvasCropper {
  max-width: 270px;
  max-height: 270px;
  overflow: hidden;
  .Cropper {
    max-width: 100%;
    max-height: 100%;
  }
  // this rule does 2 things
  // 1. makes the cropper-box round
  // 2. attaches a translucent box shadow that's large
  //    enough to extend beyond the bounds of the total cropper
  .Cropper-box {
    box-shadow: 0px 0px 0px 270px rgba(0,0,0,.7);
    border-radius: 50%;
  }
  // this rule makes the 4 translucent divs that react-cropper
  // originally used to mask the image transparent, because we don't
  // need it any more and don't want to double up the mask
  div[class^="DraggableResizable-"] {
    background-color: initial !important;
  }
}
